<template>
  <div>
    <div class="warning_cont">
      <div class="warning_hader">
        <div class="warning_contnt">
          <el-select
            v-model="formInline.recipe"
            @change="onclickcheng"
            style="width: 120px; height: 40px"
            placeholder="机种选项"
          >
            <el-option
              v-for="item in RecipeList"
              :key="item"
              :label="item"
              :value="item"
            ></el-option>
          </el-select>

          <el-select
            v-model="formInline.line"
            @change="onclickcheng"
            style="width: 120px; height: 40px"
            placeholder="线体选项"
          >
            <el-option
              v-for="item in lineList"
              :key="item"
              :label="item"
              :value="item"
            ></el-option>
          </el-select>

          <el-select
            v-model="formInline.errorcode"
            @change="onclickcheng"
            style="width: 120px; height: 40px"
            placeholder="缺陷选项"
          >
            <el-option
              v-for="item in this.defectlist"
              :key="item"
              :label="item"
              :value="item"
            ></el-option>
          </el-select>
        </div>
      </div>
      <!-- 预警K线图 -->
      <div class="nowEcharts" id="nowEcharts"></div>
    </div>

    <!-- 预警表格 -->
    <div class="warning_cont_top">
      <el-table
        :data="tableData.slice(1)"
        border
        :span-method="objectSpanMethod"
      >
        <el-table-column prop="" label="recipe">
          <!-- <template scope="scope"> -->
          <span v-for="(item, index) in recipe" :key="index">{{ item }}</span>
          <!-- </template> -->
        </el-table-column>
        <el-table-column prop="line" label="Line"></el-table-column>
        <el-table-column prop="BlackDot" label="BlackDot"></el-table-column>
        <el-table-column prop="Block" label="Block"></el-table-column>
        <el-table-column prop="BrightDot" label="BrightDot"></el-table-column>
        <el-table-column prop="Line" label="Line"></el-table-column>
        <el-table-column prop="Mura" label="Mura"></el-table-column>
      </el-table>
    </div>
  </div>
</template>

<script>
export default {
  components: {},
  data() {
    return {
      ishow: false,
      tableData: [],
      requestfirst: null,
      therequest: null,
      fintaform: {
        recipe: "VR2-1-24",
        line: "line1 ",
      },
      formInline: {
        recipe: "",
        line: "",
        errorcode: "",
      },
      value: Math.random() * 1000,
      now: +new Date(1997, 9, 3),
      data: [],
      items: [],
      oneDay: 24 * 3600 * 1000,
      typename: [],

      BlackDotval: [],
      Blockval: [],
      BrightDotval: [],
      Lineval: [],
      Muraval: [],
      listimer: [],
      listblock: [],
      lineList: [],
      RecipeList: [],
      defectlist: [],

      statmenlist: [],
      recipe: [],
      listline: [],
    };
  },

  mounted() {
    this.getrediuline(); //页面初始化 调用机种 线体方法
  },
  methods: {
    flitterData(arr) {
      let spanOneArr = [];
      let concatOne = 0;
      arr.forEach((item, index) => {
        if (index === 0) {
          spanOneArr.push(1);
        } else {
          //name 修改
          if (item.name === arr[index - 1].name) {
            //第一列需合并相同内容的判断条件
            spanOneArr[concatOne] += 1;
            spanOneArr.push(0);
          } else {
            spanOneArr.push(1);
            concatOne = index;
          }
        }
      });
      return {
        one: spanOneArr,
      };
    },

    objectSpanMethod({ rowIndex, columnIndex }) {
      if (columnIndex === 0) {
        // this.tableData  修改
        const _row = this.flitterData(this.tableData).one[rowIndex];
        const _col = _row > 0 ? 1 : 0;
        return {
          rowspan: _row,
          colspan: _col,
        };
      }
    },

    onclickcheng() {
      if (this.formInline.recipe == "") {
        this.$alert("机种不能为空", "消息提示", {
          confirmButtonText: "确定",
          callback: (action) => {
            this.$message({
              type: "info",
              message: `action: ${action}`,
            });
          },
        });
      } else if (this.formInline.line == "") {
        this.$alert("线体不能为空", "消息提示", {
          confirmButtonText: "确定",
          callback: (action) => {
            this.$message({
              type: "info",
              message: `action: ${action}`,
            });
          },
        });
      } else if (this.formInline.errorcode == "") {
        this.$alert("缺陷不能为空", "消息提示", {
          confirmButtonText: "确定",
          callback: (action) => {
            this.$message({
              type: "info",
              message: `action: ${action}`,
            });
          },
        });
      } else {
        if (this.formInline.line) {
          var chart;
          chart = this.$echarts.init(document.getElementById("nowEcharts"));
          this.getwarning();
          setTimeout(() => {
            this.nowEcharts();
            this.gettablelist();
          }, 3000);
          chart.dispose();
        }
      }
    },

    //数据 折线图请求
    getwarning() {
      this.ajax({
        url: "warning",
        method: "GET",
        params: {
          data: this.formInline,
        },
      }).then((res) => {
        // console.log(res.data);
        if (res.data.code == 200) {
          this.tableData = [];
          this.items = res.data.data;
          // console.log("选项后数据回来 2", this.items);
        }
      });
    },

    nowEcharts() {
      let my_chers = this.$echarts.init(document.getElementById("nowEcharts"));
      let biokcdot = [];
      let biockdotval = [];
      let blocktierm = [];
      let blockllist = [];
      let linelist = [];
      let bringhtdotlist = [];
      let muralist = [];
      let blocklval = [];
      let lineval = [];
      let bringhtdotval = [];
      let muraval = [];

      let list = [];
      let BlackDotlist = [];
      let Blocklist = [];
      let Linelist = [];
      let BrightDotlist = [];
      let Muralist = [];
      let BlackDotval = [];
      let Blockval = [];
      let BrightDotval = [];
      let Lineval = [];
      let Muraval = [];
      let listname = [];
      let lowerLimit = [];
      let upperLimit = [];
      let lowerLim = "";
      let upperLim = "";
      // console.log('------------',this.items.data)
      list = this.items.data;
      for (let i = 0; i < list.length; i++) {
        lowerLim = list[i].lowerLimit;
        upperLim = list[i].upperLimit;
        listname.push(list[i].type);
        if (list[i].type == "BlackDot") {
          BlackDotlist = list[i].points;
        } else if (list[i].type == "Block") {
          Blocklist = list[i].points;
        } else if (list[i].type == "BrightDot") {
          BrightDotlist = list[i].points;
        } else if (list[i].type == "Line") {
          Linelist = list[i].points;
        } else if (list[i].type == "Mura") {
          Muralist = list[i].points;
        }
      }
      let timeritem = [];
      for (let i = 0; i < 10; i++) {
        lowerLimit.push(lowerLim);
      }
      for (let i = 0; i < 400; i++) {
        upperLimit.push(upperLim);
      }

      // console.log("--------------------------",  upperLimit);
      for (var i = 0; i < BlackDotlist.length; i++) {
        timeritem.push(BlackDotlist[i].time);
        BlackDotval.push(BlackDotlist[i].val);
      }

      for (let i = 0; i < Blocklist.length; i++) {
        timeritem.push(Blocklist[i].time);
        Blockval.push(Blocklist[i].val);
      }

      for (let i = 0; i < BrightDotlist.length; i++) {
        timeritem.push(BrightDotlist[i].time);
        BrightDotval.push(BrightDotlist[i].val);
      }

      for (let i = 0; i < Linelist.length; i++) {
        timeritem.push(Linelist[i].time);
        Lineval.push(Linelist[i].val);
      }
      for (let i = 0; i < Muralist.length; i++) {
        timeritem.push(Muralist[i].time);
        Muraval.push(Muralist[i].val);
      }

      var option = {
        title: {
          text: "连续预警实时统计",
        },
        tooltip: {
          trigger: "axis",
        },
        legend: {
          data: listname,
        },
        grid: {
          left: "3%",
          right: "4%",
          bottom: "3%",
          containLabel: true,
        },
        toolbox: {
          feature: {
            saveAsImage: {},
          },
        },
        xAxis: {
          type: "category",
          boundaryGap: false,
          data: timeritem,
        },
        yAxis: {
          type: "value",
          axisLabel: {
            show: true,
            formatter: "{value}",
            interval: "auto",
          },
        },
        series: [
          {
            name: "BlackDot",
            type: "line",
            // stack: "总量",
            data: BlackDotval,
            // symbol:'star',//拐点样式
            // symbolSize: 8,//拐点大小
            itemStyle: {
              color: "#FFA500",
            },
          },
          {
            name: "Block",
            type: "line",
            // stack: "总量",
            data: Blockval,
            itemStyle: {
              color: "#48D1CC",
            },
          },
          {
            name: "BrightDot",
            type: "line",
            // stack: "总量",
            data: BrightDotval,
            itemStyle: {
              color: "#D2691E",
            },
          },
          {
            name: "Line",
            type: "line",
            // stack: "总量",
            data: Lineval,
            itemStyle: {
              color: "#7FFF00",
            },
          },
          {
            name: "Mura",
            type: "line",
            // stack: "总量",
            data: Muraval,
            itemStyle: {
              color: " #008B8B",
            },
          },
          {
            name: "HA",
            type: "line",
            data: upperLimit,
            markLine: {
              symbol: "none",
              label: {
                position: "middle", //将警示值放在哪个位置，三个值“start”,"middle","end"  开始  中点 结束
                formatter: "高预警线(0.346)",
              },
              data: [
                {
                  silent: true, //鼠标悬停事件  true没有，false有
                  lineStyle: {
                    //警戒线的样式  ，虚实  颜色
                    type: "solid",
                    color: "#DC143C",
                  },
                  yAxis: "0.346", //警戒线在y轴的坐标
                },
              ],
            },
          },
          {
            name: "UP",
            type: "line",
            data: lowerLimit,
            markLine: {
              symbol: "none",
              label: {
                position: "middle", //将警示值放在哪个位置，三个值“start”,"middle","end"  开始  中点 结束
                formatter: "低预警线(0.02)",
              },
              data: [
                {
                  silent: false, //鼠标悬停事件  true没有，false有
                  lineStyle: {
                    //警戒线的样式  ，虚实  颜色
                    type: "solid",
                    color: "#CC3333",
                  },
                  yAxis: "0.02", //警戒线在y轴的坐标
                },
              ],
            },
          },
        ],
      };

      my_chers.setOption(option, true);

      this.therequest = setInterval(() => {
        timeritem.shift();
        BlackDotval.shift();
        Blockval.shift();
        BrightDotval.shift();
        Lineval.shift();
        Muraval.shift();
        // console.log("111111111111111清除数据的长度", timeritem.length);

        this.ajax({
          url: "warning",
          method: "GET",
          params: {
            data: this.formInline,
          },
        }).then((res) => {
          // console.log(res.data);
          if (res.data.code == 200) {
            this.listline = res.data.data;
            // console.log("异步操作执行到中间",this.listline);
            for (var value of this.listline.data) {
              if (value.type == "BlackDot") {
                biokcdot = value.points;
              } else if (value.type == "Block") {
                blockllist = value.points;
              } else if (value.type == "BrightDot") {
                bringhtdotlist = value.points;
              } else if (value.type == "Line") {
                linelist = value.points;
              } else if (value.type == "Mura") {
                muralist = value.points;
              }
            }
            for (var item of biokcdot) {
              blocktierm.push(item.time);
              biockdotval.push(item.val);
            }
            for (var item2 of blockllist) {
              blocklval.push(item2.val);
            }

            for (var item3 of bringhtdotlist) {
              bringhtdotval.push(item3.val);
            }
            for (var item4 of linelist) {
              lineval.push(item4.val);
            }
            for (var item5 of muralist) {
              muraval.push(item5.val);
            }

            if (biockdotval.length == BlackDotval.length) {
              // console.log("够长了");
              BlackDotval = biockdotval;
              timeritem = blocktierm;
              Blockval = blocklval;
              BlackDotval = biockdotval;
              Lineval = lineval;
              Muraval = muraval;
            } else {
              let a = biockdotval.pop();
              let b = blocktierm.pop();
              let c = blocklval.pop();
              let d = bringhtdotval.pop();
              let e = lineval.pop();
              let f = muraval.pop();
              timeritem.push(b);
              BlackDotval.push(a);
              Blockval.push(c);
              BrightDotval.push(d);
              Lineval.push(e);
              Muraval.push(f);
            }
          }
          // console.log("异步操作执行到最后");
          my_chers.setOption(option, true);
        });

        setTimeout(() => {
          // console.log("更新列表数据");
          this.gettablelist();
        }, 5000);
        my_chers.setOption(option, true);
      }, 150000);
    },

    ///请求列表数据
    gettablelist() {
      if (this.formInline.recipe == "VR2-1-25") {
        console.log("1013 暂无数据");
      } else {
        var a = "";
        this.ajax({
          url: "listinformation",
          method: "GET",
          params: {
            data: a,
          },
        }).then((res) => {
          if (res.data.code == 200) {
            console.log("--------------------------", res.data.data);
            this.tableData = [];
            this.recipe = [];

            let objlist = [];
            let conobjtitle = [];
            let contobj1 = [];
            let contobj2 = [];
            let contobj3 = [];
            let contobj4 = [];
            conobjtitle.push("line");
            this.statmenlist = res.data.data.data;
            for (let a = 0; a < this.statmenlist.length; a++) {
              this.recipe.push(this.statmenlist[a].recipe);
              this.linelist = this.statmenlist[a].recipeData;
              for (let i = 0; i < this.linelist.length; i++) {
                if (this.linelist[i].line == "line1") {
                  contobj1.push(this.linelist[i].line);
                  for (let j = 0; j < this.linelist[i].lineData.length; j++) {
                    contobj1.push(this.linelist[i].lineData[j].val);
                    conobjtitle.push(this.linelist[i].lineData[j].type);
                  }
                } else if (this.linelist[i].line == "line2") {
                  contobj2.push(this.linelist[i].line);
                  for (let j = 0; j < this.linelist[i].lineData.length; j++) {
                    contobj2.push(this.linelist[i].lineData[j].val);
                  }
                } else if (this.linelist[i].line == "line3") {
                  contobj3.push(this.linelist[i].line);
                  for (let j = 0; j < this.linelist[i].lineData.length; j++) {
                    contobj3.push(this.linelist[i].lineData[j].val);
                  }
                } else if (this.linelist[i].line == "line4") {
                  contobj4.push(this.linelist[i].line);
                  for (let j = 0; j < this.linelist[i].lineData.length; j++) {
                    contobj4.push(this.linelist[i].lineData[j].val);
                  }
                }
              }
              objlist.push(conobjtitle, contobj1, contobj2, contobj3, contobj4);
            }
            for (let i = 0; i < objlist.length; i++) {
              let obj = {
                line: objlist[i][0],
                BlackDot: objlist[i][1],
                Block: objlist[i][2],
                BrightDot: objlist[i][3],
                Line: objlist[i][4],
                Mura: objlist[i][5],
              };
              this.tableData.push(obj);
              // console.log(this.tableData)
            }
          }
        });
      }
    },

    randomData(now, value) {
      now = new Date(+now + this.oneDay);
      value = this.value + Math.random() * 21 - 10;
      return {
        name: now.toString(),
        value: [
          [now.getFullYear(), now.getMonth() + 1, now.getDate()].join("/"),
          Math.round(value),
        ],
      };
    },

    // 机种线体请求
    getrediuline() {
      let a = {};
      this.ajax({
        url: "airplane",
        method: "GET",
        params: {
          data: a,
        },
      }).then((res) => {
        if (res.data.code == 200) {
          this.lineList = res.data.data.line;
          this.RecipeList = res.data.data.recipe;
          this.defectlist = res.data.data.defect;
          if (this.RecipeList) {
            this.$message({
              message: "请选择机种，线体",
              type: "success",
            });
            // this.nowEcharts()
          } else {
            this.$message({
              message: "数据未能返回，请刷新浏览器",
              type: "warning",
            });
          }
        }
      });
    },
  },
  beforeDestroy() {
    clearInterval(this.requestfirst);
    clearInterval(this.therequest);
  },
  beforeRouteLeave(to, from, next) {
    next();
    if (this.therequest) {
      console.log("22222222222222222");
      clearInterval(this.therequest);
      this.therequest = null;
    }
  },
};
</script>

<style  scoped>
.warning_cont {
  width: 100%;
}
.warning_cont_top {
  width: 100%;
  background: #ffffff;
  margin-top: 30px;
}
.nowEcharts {
  width: 100%;
  height: 500px;
  margin-bottom: 0.3rem;
  background: #ffffff;
  margin-top: 10px;
}

#my_chers {
  width: 100%;
  height: 400px;
  margin-top: 30px;
  background: #ffffff;
}
.warning_hader {
  width: 100%;
  margin-top: 10px;
  /* background: #ffffff; */
}
.warning_contnt {
  width: 30%;
  display: flex;
  /* justify-content: space-between; */
}

.color_con {
  line-height: 40px;
  font-size: 14px;
}
</style>